<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    li {
        display: flex;
        justify-content: space-between;
        width: 300px;

        background-color: skyblue;
        list-style: none;
    }

    textarea {
        margin-left: 40px;
        vertical-align: bottom;
    }
</style>
<body>
<label for="">
    <textarea id="" name="">123</textarea>
</label>

<button>发布</button>
<ul></ul>

<script>
    const btn = document.querySelector('button');
    const text = document.querySelector('textarea');
    const ul = document.querySelector('ul');

    btn.onclick = function () {
        if (text.value === '') {
            alert('你输入的为空!!! ')
            return false;
        }
        // 1.创建节点
        var li = document.createElement('li');
        // 阻止链接跳转需要添加 javaScript:void(0); 或 javascript:;
        li.innerHTML = `${text.value} <a href="javascript:;">删除</a>`;


        // 2.添加节点
        ul.appendChild(li);
        // ul.insertBefore(li, ul.children[0]);

        // 3.删除元素
        var as = document.querySelectorAll('ul li a');
        console.log(as)
        for (let i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                // node.removeChild; 删除的是li, 当前a所在的li this.parentNode
                ul.removeChild(this.parentNode);
            }
        }
    }
</script>
</body>
</html>
